<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sensortype--管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/Public/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/Public/static/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 16%">
                <input type="search" name="site_name" autocomplete="off" class="layui-input" placeholder="站点名称"/>
            </div>
            <div class="layui-input-inline" style="width: 16%">
                <input type="search" name="site_code" autocomplete="off" class="layui-input" placeholder="站点编码"/>
            </div>
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-green  layui-btn-sm search_btn" title="搜索">
                    <i class="layui-icon layui-icon-search "></i>
                </a>
                <a class="layui-btn layui-btn-sm" title="刷新当前页" href="javascript:void(0);"
                   onclick="layer.load(1);window.location.reload(true);"><i class="layui-icon">&#xe669;</i></a>
            </div>
        </div>
    </form>
</blockquote>
<div style="height: 500px;width: 100%;">
    <table id="table" lay-filter="table"></table>
</div>

<div style="margin-top:20px;text-align: center;">
    <div class="layui-input-block" style="margin-left: 0px;">
        <button class="layui-btn addsubmit" lay-submit="" lay-filter="addData">提交</button>
        <button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
    </div>
</div>
<script type="text/javascript" src="/Public/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/Public/static/layui/layui.js"></script>
<script type="text/javascript">
    var admin_user_id = "{$info.id}";
    var selectArr = {};
    var tablist = '';
    //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
    var ids_one = '{$ids_one}';
    var ids = new Array();
    if (ids_one != "") {
        ids = JSON.parse(ids_one);
        $.each(ids, function (index, e) {
            var obj = {
                "checked": false,
                "id": 0
            }
            selectArr[e] = obj;
            selectArr[e]['checked'] = true;
            selectArr[e]['id'] = e;
        })
    }
    var cookiePageArray = [];
    //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
    var table_data = new Array();
    layui.use(['form', 'layer', 'table', 'laytpl'], function () {
        let form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            laytpl = layui.laytpl,
            table = layui.table;

        //规则列表
        tablist = table.render({
            elem: '#table',
            url: '/admin/auth/sitelist',
            method: 'post',
            page: true,
            limit: 15,
            limits: [15, 20, 50, 100],
            cellMinWidth: 95,
            height: '500px',
            id: "jzbbxh",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'id', title: 'ID', align: 'center', width: 80},
                {
                    field: 'site_name',
                    title: '站点名称',
                    align: 'center'
                },
                {field: 'site_code', title: '站点编码', align: 'center'},
            ]],
            done: function (res, curr, count) {

                //.假设你的表格指定的 id="sale-data"，找到框架渲染的表格
                var tbl = $('#table').next('.layui-table-view');
                //记下当前页数据，Ajax 请求的数据集，对应你后端返回的数据字段
                cookiePageArray = res.data;
                //记录当前也选中的chechbox个数(判断全选使用的)
                var len = 0;
                //遍历当前页数据，对比已选中项中的 id
                for (var index = 0; index < cookiePageArray.length; index++) {
                    if (typeof (selectArr[cookiePageArray[index].id]) != "undefined") {
                        if (selectArr[cookiePageArray[index].id]['checked']) {
                            var i = cookiePageArray[index]['LAY_TABLE_INDEX'];
                            var checkbox = $('.layui-table tr[data-index=' + i + '] input[type="checkbox"]');
                            checkbox.prop('checked', true);
                            checkbox.next().addClass('layui-form-checked');
                            //为了设置全选的
                            len++;
                        }
                    }
                }

                //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                if (len === cookiePageArray.length) {
                    var checkboxAll = $('.layui-table-header th[data-field=0] input[type="checkbox"]');
                    checkboxAll.prop('checked', true);
                    checkboxAll.next().addClass('layui-form-checked');
                }

                //暂时只能这样渲染表单
                form.render('checkbox');

            }
        });

        /**
         * 复选框的点击事件
         * 主要操作为：
         * 将所有的勾选成功的id储存传入后台拉取数据存到本地销售数据库
         */
        table.on('checkbox(table)', function (obj) {
            $('input:checkbox[name=layTableCheckbox]').each(function (i, e) {
                var data_index = $(e).parent().parent().parent().attr("data-index")
                var ischecked = $(e).parent().find(".layui-form-checkbox").hasClass("layui-form-checked")
                if (typeof (cookiePageArray[data_index]) != "undefined") {
                    var obj = {
                        "checked": false,
                        "id": 0
                    }
                    if (ischecked) {
                        selectArr[cookiePageArray[data_index].id] = obj;
                        selectArr[cookiePageArray[data_index].id]['checked'] = true;
                        selectArr[cookiePageArray[data_index].id]['id'] = cookiePageArray[data_index].id;
                    } else {
                        selectArr[cookiePageArray[data_index].id] = obj;
                        selectArr[cookiePageArray[data_index].id]['checked'] = false;
                        selectArr[cookiePageArray[data_index].id]['id'] = cookiePageArray[data_index].id;
                    }
                }
            })

        });

        //搜索
        $(".search_btn").on("click", function () {
            tablist.reload({
                where: {
                    para: $('form').serialize()
                }
            });
        });

        form.on("submit(addData)", function () {

            var selectedNum = 0;
            var postIds = [];
            $.each(selectArr, function (index, e) {
                if (e.checked) {
                    postIds.push(e.id);
                    selectedNum++;
                }
            })

            if (selectedNum <= 0) {
                layer.msg('请选择站点', {icon: 5, time: 2000});
                return false;
            }
            layer.confirm('确认要提交数据吗?', function (confirmIndex) {
                //do something
                $.post("/admin/auth/addusersite", {
                    ids: postIds,
                    admin_user_id: admin_user_id
                }, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 6, time: 2000});
                        window.parent.layer.close($('#iframeValue', window.parent.document).val());
                        window.parent.reloadTable();
                    } else if (res.code == 0) {
                        layer.msg(res.msg, {icon: 5, time: 2000});
                    } else if (res.code == 3) {
                        layer.msg(res.info, {icon: 5, time: 2000});
                    }
                    layer.close(confirmIndex);
                });
            });
            return false;
        });

    })

    $(".cancel").click(function () {
        window.parent.layer.close($('#iframeValue', window.parent.document).val());
    })

</script>
</body>
</html>